<template>
  <div class="app-container">
    <div>
      <div style="margin: 10px 0">
        <el-input v-model="search" placeholder="请输入关键字" style="width: 20%" clearable></el-input>
        <el-button type="primary" style="margin-left: 5px" @click="getList">查询</el-button>
      </div>
      <el-table
        :data="doctorList"
        size="mini"
        style="width: 100%;"
        cell-style>
        <el-table-column
          prop="id"
          label="头像"
          align="center">
          <template slot-scope="scope">
            <el-image
              style="width: 50px; height: 50px"
              :src="scope.row.avatar"
              :preview-src-list="[scope.row.avatar]">
            </el-image>
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          align="center">
        </el-table-column>
        <el-table-column
          prop="gender"
          label="性别"
          align="center">
        </el-table-column>
        <el-table-column
          prop="phone"
          label="联系电话"
          align="center">
        </el-table-column>
        <el-table-column
          prop="hospitalName"
          label="所属医院"
          align="center">
        </el-table-column>
        <el-table-column
          prop="departmentName"
          label="所属部门"
          align="center">
        </el-table-column>
        <el-table-column
        prop="position"
        label="职位"
        align="center">
      </el-table-column>
        <el-table-column
        prop="email"
        label="邮箱"
        align="center">
      </el-table-column>
        <el-table-column
          prop="spare"
          label="值班时间"
          align="center">
        </el-table-column>
        <el-table-column
          prop="career"
          label="资历年限"
          align="center">
        </el-table-column>
        <el-table-column
          prop="major"
          label="擅长领域"
          align="center">
        </el-table-column>
        <el-table-column
          prop="address"
          label="操作"
          align="center">
          <template slot-scope="scope">
            <el-button @click="modify(scope.row)" class="el-button--primary" size="small">修改</el-button>
            <el-button @click="remove(scope.row)" class="el-button--danger" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="classify-Pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[5, 10, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>
    <el-dialog
      title="修改"
      :visible.sync="dialogVisible2"
      width="50%"
    >
    <el-form ref="form" :model="form2" label-width="80px">
      <el-form-item label="id"  v-show="false">
        <el-input type="number" v-model="form2.id"></el-input>
      </el-form-item>
      <el-form-item label="部门id" v-show="false">
        <el-input type="number" v-model="form2.departmentId"></el-input>
      </el-form-item>
      <el-form-item label="医院id" v-show="false">
        <el-input type="number" v-model="form2.hospitalId"></el-input>
      </el-form-item>
      <el-form-item label="头像">
        <el-upload
          class="avatar-uploader"
          :action="ipAddress+'/file/upload/'"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
          <img v-if="avatarUrl" :src="avatarUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="form2.name"></el-input>
      </el-form-item>
      <el-form-item label="地址">
        <el-input type="number" v-model="form2.age"></el-input>
      </el-form-item>
      <el-form-item label="电话(登录账户)">
        <el-input v-model="form2.phone"></el-input>
      </el-form-item>
      <el-form-item label="性别">
        <el-input  v-model="form2.gender"></el-input>
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input type="email" v-model="form2.email"></el-input>
      </el-form-item>
      <el-form-item label="职位">
        <el-input  v-model="form2.position"></el-input>
      </el-form-item>
      <el-form-item label="专长（多个用逗号隔开）">
        <el-input v-model="form2.major"></el-input>
      </el-form-item>
      <el-form-item label="资历年限">
        <el-input v-model="form2.career"></el-input>
      </el-form-item>
      <el-form-item label="值班时间">
        <el-input v-model="form2.spare"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="formSubmit2">提交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getDoctor, deleteDoctor, addDoctor } from '@/api/doctor.js'
import { mapGetters } from 'vuex'

export default {
  name: 'departmentManage',
  data() {
    return {
      pageNum: 1,
      pageSize: 10,
      total: 0,
      doctorList: [],
      search: '',
      form2: {},
      dialogVisible2: false,
      avatarUrl: ''
    }
  },
  components: {

  },
  computed: {
    ...mapGetters(['userInfo', 'ipAddress'])
  },
  beforeMount() {
    this.getList()
  },
  methods: {
    async formSubmit2() {
      if (!this.form2.avatar || !this.form2.phone || !this.form2.name) {
        this.$message({
          type: 'error',
          message: '头像，姓名，手机为必填项！'
        })
        return
      }
      this.form2.role = 'doctor'
      const res = await addDoctor(this.form2)
      this.$message({
        type: 'success',
        message: res.data
      })
      this.dialogVisible2 = false
    },
    beforeAvatarUpload() {

    },
    handleAvatarSuccess(res) {
      this.avatarUrl = res.data
      this.form2.avatar = res.data
    },
    modify(info) {
      this.form2 = info
      this.avatarUrl = info.avatar
      this.dialogVisible2 = true
    },
    remove(info) {
      this.$confirm('是否移除该专家？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        const res = await deleteDoctor({ id: info.id })
        this.$message({
          type: 'success',
          message: res.data
        })
        this.getList()
      })
    },
    getList() {
      const params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        keyword: this.search === '' ? null : this.search
      }
      getDoctor(params).then((res) => {
        const data = res.data
        this.doctorList = data.list
        this.pageNum = data.pageNum
        this.pageSize = data.pageSize
        this.total = data.total
      })
    },
    handleDepartmentAll(id) {
      this.selectedDepartmentId = id
      this.getDoctorList()
    },
    getDepartments() {
      const params = {
        hospitalId: this.selectedHospitalId
      }
      getDepartmentList(params).then((res) => {
        this.departmentList = res.data
        this.show = 2
      })
    },
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum
      this.getList()
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.getList()
    },
    handleDoctorSizeChange(pageSize) {
      this.doctorPageSize = pageSize
      this.getDoctorList()
    },
    handleDoctorCurrentChange(pageNum) {
      this.doctorPageNum = pageNum
      this.getDoctorList()
    },
    handleDepartment(item) {
      this.selectedHospitalId = item.id
      this.selectHospital = item
      this.getDepartments()
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    filesUploadSuccess(res) {
      console.log(res)
      this.form.images += res.data + ','
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.app-container{
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow-y: scroll;
  max-width: 100vw;
  margin: 0 auto;
}
.classify-Pagination{
  padding-top: 10px;
  text-align:right;
  padding-right: 20px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
</style>
